<template>
  <a-card :class="containerCardClass">
    <a-descriptions v-if="data" bordered>
      <template #title>
        <slot>{{ data.label }}</slot>
      </template>
      <a-descriptions-item
          :span="descriptionItemSpan"
          :label="prop.label"
          v-for="prop in data.properties"
          :key="prop.label">
        <template #label>
          <a-tag :color="data.tagColor">{{ prop.label }}</a-tag>
        </template>
        <a-badge v-if="prop.type === 'status'" :status="prop.status.value" :text="prop.status.text"/>
        <div v-else>{{ prop.value }}</div>
      </a-descriptions-item>
    </a-descriptions>
    <a-empty v-else/>
  </a-card>
</template>

<script>
export default {
  name: 'UniversalStatus',
  props: {
    data: Object,
    singleLine: {
      type: Boolean,
      default: false
    },
    fullHeight: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    containerCardClass () {
      return `a-card-beautiful ${this.fullHeight ? 'max-height' : ''}`
    },
    descriptionItemSpan() {
      return this.singleLine ? 3 : 1
    }
  }
}
</script>

<style scoped>
</style>
